<template>
  <input class="myinput" :class="{'success':!status,'error': status}" @input="handleInput" @blur="handleBlur"/>
</template>

<script>
export default {
  props: ['rules','msg'],
  data() {
    return {
      status: true
    };
  },
  methods: {
    handleInput(event) {
      //   console.log(this.rules); 判断从父组件传入的正则 做出相应的程序
      //   console.log(this.rules.test());
      //   console.log(event.target.value);
      let value = event.target.value;
      if (this.rules && this.rules.test(value)) {
        this.status = false;
      } else {
        this.status = true;
      }
      //   把变化的值传给父组件
      this.$emit('input', value);
    },
    handleBlur(event) {
         let value = event.target.value;
      if (this.rules && !this.rules.test(value)) {
        // console.log('错误');
        this.$toast.fail({
            message: this.msg || '请输入正确的用户名',
            duration: 3000
        })
      }
    }
  }
};
</script>

<style lang="less">
.myinput {
  outline: none;
  border: none;
  border-bottom: 2px solid #ccc;
  width: 318 * 100vw/360;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
}
// 判断用户输入内容合法性的下划线样式
.success {
  border-bottom: 2px solid green;
}
.error {
  border-bottom: 2px solid #d43d3d;
}
</style>
